<template>
  <div class="el-container">
    <div class="title">教育成果展示<span></span></div>
    <div class="content">
      <div class="item">
        <img class="img" src="@/assets/images/home1.png" alt="logo" />
        <div class="text">
          <div class="text1 mb20">
            “智慧党建云平台”是专为教育局及学校党组织打造的数字化管理解决方案，集党建宣传、党员教育、组织管理、数据分析于一体，助力党建工作高效化、规范化、智能化。
          </div>
          <div class="text2">核心功能：</div>
          <div>在线学习：整合党课资源，支持党员教师随时随地进行理论学习与考核；</div>
          <div>组织管理：数字化党支部工作台账，自动提醒“三会一课”、主题党日活动；</div>
          <div>先锋示范：实时展示党员教师帮扶学生、志愿服务等积分数据，激发模范作用；</div>
          <div class="mb20">数据分析：一键生成党建考核报表，动态监测各校党组织活动参与率、任务完成率。</div>
          <div class="text2">应用价值：</div>
          <div>✔ 解决基层党建“记录难、统计难、督导难”痛点；</div>
          <div>✔ 强化师生思想政治教育，推动党建与教育教学融合；</div>
          <div>✔ 为上级部门提供可视化决策依据。</div>
        </div>
      </div>

      <div class="item" style="margin-top: 80px">
        <img class="img" src="@/assets/images/home1.png" alt="logo" />
        <div class="text">
          <div class="text1 mb20">
            “智慧党建云平台”是专为教育局及学校党组织打造的数字化管理解决方案，集党建宣传、党员教育、组织管理、数据分析于一体，助力党建工作高效化、规范化、智能化。
          </div>
          <div class="text2">核心功能：</div>
          <div>在线学习：整合党课资源，支持党员教师随时随地进行理论学习与考核；</div>
          <div>组织管理：数字化党支部工作台账，自动提醒“三会一课”、主题党日活动；</div>
          <div>先锋示范：实时展示党员教师帮扶学生、志愿服务等积分数据，激发模范作用；</div>
          <div class="mb20">数据分析：一键生成党建考核报表，动态监测各校党组织活动参与率、任务完成率。</div>
          <div class="text2">应用价值：</div>
          <div>✔ 解决基层党建“记录难、统计难、督导难”痛点；</div>
          <div>✔ 强化师生思想政治教育，推动党建与教育教学融合；</div>
          <div>✔ 为上级部门提供可视化决策依据。</div>
        </div>
      </div>
      <div class="item">
        <img class="img" src="@/assets/images/home1.png" alt="logo" />
        <div class="text">
          <div class="text1 mb20">
            “智慧党建云平台”是专为教育局及学校党组织打造的数字化管理解决方案，集党建宣传、党员教育、组织管理、数据分析于一体，助力党建工作高效化、规范化、智能化。
          </div>
          <div class="text2">核心功能：</div>
          <div>在线学习：整合党课资源，支持党员教师随时随地进行理论学习与考核；</div>
          <div>组织管理：数字化党支部工作台账，自动提醒“三会一课”、主题党日活动；</div>
          <div>先锋示范：实时展示党员教师帮扶学生、志愿服务等积分数据，激发模范作用；</div>
          <div class="mb20">数据分析：一键生成党建考核报表，动态监测各校党组织活动参与率、任务完成率。</div>
          <div class="text2">应用价值：</div>
          <div>✔ 解决基层党建“记录难、统计难、督导难”痛点；</div>
          <div>✔ 强化师生思想政治教育，推动党建与教育教学融合；</div>
          <div>✔ 为上级部门提供可视化决策依据。</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="home"></script>

<style lang="scss" scoped>
.el-container {
  display: flex;
  flex-direction: column;
}
.title {
  position: relative;
  z-index: 2;
  margin: auto;
  font-size: 28px;
  font-weight: 700;
  color: #1981ff;
  span {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 1;
    width: 120px;
    height: 14px;
    background-color: #d2e3ff;
    border-radius: 4px;
    opacity: 0.5;
    transform: translateX(-50%);
  }
}
.content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 1406px;
  height: 885px;
  margin: 42px auto 82px;
  .item {
    display: flex;
    flex-direction: column;
    width: 428px;
    height: 788px;
    overflow: hidden;
    color: rgb(57 99 166 / 100%);
    border-radius: 2px;
    box-shadow: 0 2px 10px 0 rgb(0 72 174 / 30%);
    .img {
      flex-basis: 330px;
      width: 100%;
      height: 330px;
      margin-bottom: 0;
    }
    .text {
      flex-grow: 1;
      padding: 31px 25px 23px;
      margin: 0 1px;
      font-size: 14px;
      background-color: #f4f9ff;
      .text1 {
        font-size: 16px;
        font-weight: 700;
      }
      .text2 {
        font-size: 14px;
        font-weight: 700;
      }
    }
    .mb20 {
      margin-bottom: 20px;
    }

    // box-shadow: rgb(0 72 174 / 30%);
  }
}
</style>
